import React from 'react';
import './index.less';
import {bindAction, bindModel, render} from 'react-division';
import DataTableModel from './models/DataTable';
import DataTableAction from './actions/DataTable';
import tableCreate from 'lib/ConfigTable';
import {Button, Space} from 'antd';

bindAction({
    dataTA: DataTableAction
});
bindModel({
    dataTM: DataTableModel
});

const ConfigTable = tableCreate({
    modelName: 'dataTM',
    actionName: 'dataTA'
});

export default render({
    models: ['dataTM'],
    actions: ['dataTA']
})(class extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        const {dataTM, action} = this.props;

        return (
            <div className="data-table-page">
                <div className="data-table-header">
                    <Space>
                        {dataTM.keys.length > 1 && <Button
                            onClick={action.dataTA.tuPrevProp}
                        >
                            上一层
                        </Button>}
                        <Button
                            onClick={action.dataTA.addNewProp}
                        >
                            新增属性
                        </Button>
                        <span className="data-table-prop-path">
                            数据属性路径：{dataTM.keys.join(' -> ')}
                        </span>
                    </Space>
                </div>
                <ConfigTable 
                    operation={[{
                        label: '编辑对象',
                        visible: (rowData) => ['Object', 'Array'].includes(rowData.keyType),
                        onClick: action.dataTA.editObject
                    }, {
                        label: '删除属性',
                        visible: true,
                        onClick: action.dataTA.delProp
                    }]}
                />
            </div>
        );
    }
});
